<template>
	<view class="box">
		<!-- 头部信息 -->
		<view class="title fw-bt">
			<view class="f-w" v-if="type==1">
				<view class="tag">优惠换购</view>
				<view class="f28">组合更优惠</view>
			</view>
			<view class="f-w" v-else-if="type==2">
				<view class="tag">满减商品</view>
				<view class="f28">满减更优惠</view>
			</view>
			<view class="f-w" v-else>
				<view class="tag">红包凑单</view>
				<view class="f28">多选更优惠</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="list">
			<goods @mer_id="mer_id" @dpIds="ids" @type='type'></goods>
		</view>
		<!-- 返回 -->
		<view class="" style="height: 130rpx;"></view>
		<view class="btn fw-ct" @click="goBack">
			<view>返回购物车</view>
		</view>
	</view>
</template>

<script>
	import goods from '@/components/goods.vue'
	import Cache from '@/util/cache.js'
	
	import {
		getUserProudctRecommendApi,
		getMerchantProductSpuListApi
	} from '@/api/product.js'

	export default {
		components: {
			goods
		},
		data() {
			return {
				// type: 1, //1.优惠换购 2.打折商品 3。红包凑单
				type: 1, //1为推荐菜市场下商品，2为满件减  ，3，凑单红包，3搭配商品,4优惠换购
				keyName: '@@@@@@@@@@@@@@@@@@@@@@@@@',
				options: {
					mer_id: '',
					ids: ''
				}
			}
		},
		onReachBottom() {
			console.log('加载更多');
		},
		onLoad(options) {
			this.options = options
			this.type = options.type || 1;
			if (this.type == 4) {
				uni.setNavigationBarTitle({
					title: '优惠换购商品'
				})
				this.getProudct4()
			}
			if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '满件打折商品'
				})
				this.getProudct2()
			}
			if (this.type == 3) {
				uni.setNavigationBarTitle({
					title: '红包凑单'
				})
				this.getProudct3()
			}
			if (this.type == 1) {
				uni.setNavigationBarTitle({
					title: '推荐'
				})
				this.getProudct1()
			}
			if (this.type == 5) {
				uni.setNavigationBarTitle({
					title: '搭配商品'
				})
				this.getProudct5()
			}
		},
		methods: {
			// 返回购物车
			goBack() {
				uni.navigateBack()
			},
			getProudct4() { //换购，满多少可购买
				// Cache.set(this.keyName)
				getMerchantProductSpuListApi(this.options.mer_id, {
					limit: 40,
					product_type: 0,
					is_change: 1
				}).then(res => {
					Cache.set(this.keyName, res.data.list)
				}).catch(err => {

				})
			},
			getProudct2() { //满件打折
				getMerchantProductSpuListApi(this.options.mer_id, {
					limit: 40,
					product_type: 0
				}).then(res => {
					Cache.set(this.keyName, res.data.list)
				}).catch(err => {

				})
			},
			getProudct3() { //红包凑单
				getMerchantProductSpuListApi(this.options.mer_id, {
					limit: 40,
					product_type: 0,
					order: 'price_asc'
				}).then(res => {
					Cache.set(this.keyName, res.data.list)
				}).catch(err => {

				})
			},
			getProudct1() { //推荐
				getUserProudctRecommendApi({
					mar_id: JSON.parse(Cache.get('market')).id
				}).then(res => {
					Cache.set(this.keyName, res.data.product)
				}).catch(err => {

				})
			},
			getProudct5() { //搭配商品
				getMerchantProductSpuListApi(this.options.mer_id, {
					limit: 40,
					product_type: 0,
					dapei: 1,
					order: 'sales_asc'
				}).then(res => {
					Cache.set(this.keyName, res.data.list)
				}).catch(err => {

				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
	.box {
		.tag {
			margin-right: 8rpx;
			padding: 1rpx 6rpx;
			font-size: 24rpx;
			color: #fff;
			background: linear-gradient(-50deg, #F83535 0%, #FC6767 100%);
			border-radius: 4rpx;
		}

		.title {
			padding: 15rpx 20rpx;
			background-color: #FFEDED;
		}

		.list {
			padding: 20rpx;
		}

		.btn {
			position: fixed;
			left: 0;
			bottom: 30rpx;
			width: 750rpx;
			height: 130rpx;
			background: #FFFFFF;
			z-index: 99;

			&>view {
				width: 690rpx;
				height: 100rpx;
				color: #fff;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 10rpx;
			}
		}
	}
</style>
